<template>
    <div class="statistics">
        <div class="statisticsBox">
            <h1 class="totalTitle">{{totalTitle}}</h1>
            <div v-for="(item, i) in questionList" :key="item" >
                <div class="questionBox" v-if="questionList[i].type == 'radio' || questionList[i].type == 'checkbox'">
                        <div class="questionTitle">{{questionIndex(i)}}.{{questionList[i].title}}</div>
                        <div class="info">填写人数：{{count}}</div>
                        <div class="optionsBox" v-for="(item) in questionList[i].options" :key="item">
                            <div class="message">{{item.message}}</div>
                            <div class="options">
                                <div class="select" :style="{width: Proportion(i, item.message) + '%'}"></div>
                                <div class="optionsinfo">选择率:{{Proportion(i, item.message)}}%/选择人数:{{getmessage(i, item.message) }}</div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from '../../store'
// import {getStatistical} from '@/util/apis'
export default {
    // 写路由 获取index 数据库获取具体问题的总填写人数 具体选项的选择人数 数据我来处理就行 
    data(){
        return {
            // questionList: store.state.question[sessionStorage.getItem('index')].questions,
            num: 0, //总人数 如果该题不是选择题 读取的时候前端设置0占位
            num2: [] //选择人数该题不是选择题 用读取的时候前端设置空数组占位
        }
    },
    // mounted () {
        // let params = {
        //     id: store.state.question[sessionStorage.getItem('index')].id
        // }
        // getStatistical(params).then((response)=>{
        //     console.log(response);
        //     this.num = response.message[0].count
        //     this.num2 = response.message[0].answers
        //     console.log(this.num2)
        // }).catch((error)=>{
        //     console.log(error);
        // })
    // },
    computed: {
        questionIndex(){
            return function(index){
                let qIndex = index + 1
                for(let i = 0; i < index; i++){
                    if (store.state.question[0].questions[i].type == 'text') {
                        qIndex = qIndex - 1
                    }
                }
                return qIndex || 0
            }
        },
        Proportion(){
            return function(i, item){
                let a
                if(store.state.getAnswers.length > 0){
                    a = store.state.getAnswers
                }else{
                    a = JSON.parse(sessionStorage.getItem('getAnswers'))
                }
                if (sessionStorage.getItem('count') == 0 || sessionStorage.getItem('getAnswers').length == 0){
                    return 0;
                }
                console.log(a[i].answer[item])
                return (Math.round(a[i].answer[item] / sessionStorage.getItem('count') * 10000) / 100.00) || 0
            }
        },
        count(){
            if(store.state.count == -1){
                console.log(1)
                return sessionStorage.getItem('count')
            }
            else{
                console.log(-1)
                return store.state.count
            }
        },
        getoptions(){
            // let arr =[]
            console.log(this.num2)
            // if(this.num2) {
            //     let c = 0
            //     for(let i = 0; i < store.state.question[sessionStorage.getItem('index')].questions.length; i++){
            //         if(store.state.question[sessionStorage.getItem('index')].questions[i].type == 'radio' ||
            //         store.state.question[sessionStorage.getItem('index')].questions[i].type == 'checkbox') {
            //             arr.push(this.num2[c].answers)
            //             c++
            //         }else{
            //             arr.push(0)
            //         }
            //     }

            // }
            // console.log(arr)
            return this.num2 || []
        
        },
        getmessage(){
            return function (index, message){
                    let a
                    if(store.state.getAnswers.length > 0){
                         a = store.state.getAnswers[index].answer
                    }
                    else{
                         a = JSON.parse(sessionStorage.getItem('getAnswers'))[index].answer
                    }
                    console.log(a[message])
                    return a[message]
            }
        },
        totalTitle(){
            if(store.state.question.length > 0){
                return store.state.question[sessionStorage.getItem('index')].totalTitle
            }
            return ''
        },
        questionList(){
            if(store.state.question.length > 0){
                return store.state.question[sessionStorage.getItem('index')].questions
            }
            return []
        },
    },
}
</script>

<style scoped>
.statistics{
    width: 100vw;
    height: 100vh;
    background-color: #2b343b;
    overflow: auto;
}

.statisticsBox{
    position: relative;
    width: 1000px;
    min-height: 500px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 80px;
    padding: 30px 30px 70px 30px;
    border-radius: 2rem;
    box-shadow: 0 60px 40px -30px rgba(0, 0, 0, .27);
}

.totalTitle{
    position: relative;
    width: 100%;
    text-align: center;

}

.info{
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    font-size: .9rem;
}

.questionBox{
    position: relative;
    width: 90%;
    min-height: 200px;
    margin: 0 auto;
    margin-top: 30px;
}

.questionTitle{
    position: relative;
    width: 100%;
    font-size: 1.2rem;
}

.optionsBox{
    position: relative;
    width: 100%;
    height: 40px;
    margin: 0 auto;
    margin-top: 20px;
}

.message{
    position: absolute;
    width: 10%;
    height: 40px;
    left: 0;
    text-align: center;
    line-height: 40px;
    font-size: 1rem;
    overflow: hidden;
}

.options{
    position: absolute;
    width: 90%;
    height: 40px;
    right: 0;
    background-color: #e0e0e0;
    border-radius: 1rem;
    overflow: hidden;
}

.select{
    position: absolute;
    width: 55%;
    height: 40px;
    background-color: #4187f6;
}

.optionsinfo{
    position: absolute;
    width: 300px;
    height: 40px;
    right: 0;
    text-align: center;
    line-height: 40px;
}
</style>